<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    <!-- import CSS -->
    <script src="./static/js/vue3.js"></script>
    <link rel="stylesheet" href="./static/css/common.css">
    <link rel="stylesheet" href="./static/css/detail.css">
    <!-- import JavaScript -->
    <script src="./static/js/markdown-it.min.js"></script>
    <script src="./static/js/axios.min.js"></script>
    <title>MarGco</title>
</head>
<body>
<div id="app">
    <div class="topNavigationBar">
        <div class="tb-left">
            <div class="marGcoIcon" @click="goTo('./index.html')">MARGCO</div>
            <div class="marGcoNavigationBarButton" v-for="item in topBars" @click="goTo(item.link)">{{item.name}}</div>
        </div>
        <div class="tb-right" v-if="isLogin">
            <img alt="icon" class="userIcon" src="./static/img/CokeGGts.jpg">
        </div>
        <div class="tb-right" v-else>
            <button class="marGcoButton" @click="goTo('./certified.html')">
                {{userButtonText[0]}}
            </button>
            <button class="marGcoButton button-cyan" @click="goTo('./certified.html')">
                {{userButtonText[1]}}
            </button>
        </div>
    </div>
    <div class="mainContainer">
        <div class="helloElement1 helloElementPositionAndSize2"></div>
        <div class="helloElement2 helloElementPositionAndSize1"></div>
        <div class="helloElement3 helloElementPositionAndSize3"></div>
        <div class="card">
            <div class="card-body markdownPanel" v-html="text">

            </div>
        </div>
    </div>
</div>

</body>
<script src="./static/js/detail.js"></script>
</html>